    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    body {
        background-color: antiquewhite;
    }
    
    .wrapper {
        margin: 10px;
    }
    
    .wrapper canvas {
        border: 1px soild pink;
        border-radius: 25px;
        box-shadow: 10px 10px 10px #888888;
    }
    
    .wrapper .btn-list {
        width: 1000px;
        text-align: center;
    }
    
    .wrapper .btn-list li {
        display: inline-block;
        margin: 40px;
    }
    
    .wrapper .btn-list li input {
        width: 60px;
        background-color: rgb(166, 197, 226);
        border-radius: 5px;
        color: white;
        border: none;
        cursor: pointer;
        padding: 5px;
    }
    
    .range {
        -webkit-appearance: none;
        height: 1px;
        outline: none;
        width: 180px !important;
        border-radius: 20px;
    }
    
    .range::-webkit-slider-thumb {
        /* 滑块的样式 */
        -webkit-appearance: none;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background-color: rgb(70, 141, 158);
        box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
    }
    
    .wrapper .btn-list li input:hover {
        transition: .3s;
        transform: translate(-5px, -5px);
        box-shadow: 5px 5px 5px #888888;
        background-color: rgb(142, 191, 238);
    }